<script>
export default {
  name: "test-card",

  data() {
    return {
      headerContent: ''
    }
  },

  created() {
    let idx = 0
    setInterval(() => {
      const tips = ['', 'ni', 'chou', 'sha', '??', 'testTitle']
      this.headerContent = tips[idx++ % tips.length]
    }, 2000)
  }
}
</script>

<template>
<div class="test-card">
<!--  <z-card :body-style="{ padding: '20px 8px', background: 'gray', color: 'white' }">-->
<!--    <template v-if="headerContent" #header>-->
<!--      {{ headerContent }}-->
<!--    </template>-->
<!--    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias aperiam assumenda cumque distinctio dolores eos est expedita ipsum itaque iusto laudantium, molestias nemo numquam odio officiis, placeat temporibus tenetur!-->
<!--  </z-card>-->
<!--  <div style="margin: 20px 0;"></div>-->
<!--  <g-card :body-style="{ padding: '20px 8px', background: 'gray', color: 'white' }">-->
<!--    <template v-if="headerContent" #header>-->
<!--      {{ headerContent }}-->
<!--    </template>-->
<!--    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias aperiam assumenda cumque distinctio dolores eos est expedita ipsum itaque iusto laudantium, molestias nemo numquam odio officiis, placeat temporibus tenetur!-->
<!--  </g-card>-->
  <div style="margin: 20px 0;"></div>
  <z-card header="headerContent" shadow="hover">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores dolorum inventore quos. Molestias, nihil, veniam. Aspernatur atque delectus deserunt dolorem pariatur, placeat porro quae quam sint sunt veniam vero voluptatibus.
  </z-card>
  <div style="margin: 20px 0;"></div>
  <g-card header="headerContent" shadow="hover">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur dolor illum in inventore laudantium possimus praesentium quia quisquam ratione. Deserunt, molestias quaerat? Accusantium consequuntur cupiditate eos incidunt itaque veritatis.
  </g-card>
</div>
</template>

<style scoped>

</style>